<template>
    <el-select v-model="data.stockId" placeholder="股票名称" filterable style="float: left; margin-right: 20px;">
        <el-option
            v-for="item in data.stockNameList"
            :key="item.stockId"
            :label="item.stockName"
            :value="item.stockId"
        />
    </el-select>

    <el-date-picker
        v-model="data.selectTime"
        type="daterange"
        format="YYYY/MM/DD"
        range-separator="To"
        start-placeholder="Start date"
        end-placeholder="End date"
        style="float: left; margin-right: 20px;"
    />

    <el-button type="primary" @click="drawBasicInfo">显示基本数据</el-button>
    <el-button type="primary" @click="drawAverageInfo">显示均线数据</el-button>

    <div id="chart" class="single-chart"></div>
</template>

<script>
import { onBeforeMount, reactive } from "vue";
import { formatTime, getRequest, message, postRequest } from "@/utils/api";
import * as echarts from 'echarts';

export default {
    name: "Index",
    setup() {
        const data = reactive({
            stockId: "",
            stockNameList: [],
            selectTime: [],
            stockDataList: [],
            averageDataList: [],
        });
        onBeforeMount(() => {
            getRequest("/stockName/listAll").then((res) => {
                if (res.data.code == 200) {
                    data.stockNameList = res.data.data;
                } else if (res.data.code == 500) {
                    message(res.data.msg, "error");
                }
            });
        });
        function drawBasicInfo() {
            const xData = [];
            const seriesData = [];
            var stockName = "";
            data.stockNameList.forEach(item => {
                if (item.stockId == data.stockId) {
                    stockName = item.stockName;
                }
            });
            postRequest("/stockData/getBasicData", {
                stockId: data.stockId,
                startDate: formatTime(data.selectTime[0]),
                endDate: formatTime(data.selectTime[1])
            }).then((res) => {
                if (res.data.code == 200) {
                    data.stockDataList = res.data.data;
                    const yData = [];
                    const nameList = ["startPrice", "highPrice", "lowPrice", "endPrice"];
                    for (var i = 0; i < 4; i ++) {
                        yData.push({
                            name: nameList[i],
                            data: []
                        })
                    }
                    data.stockDataList.forEach(item => {
                        xData.push(item.stockDate);
                        yData[0].data.push(item.startPrice);
                        yData[1].data.push(item.highPrice);
                        yData[2].data.push(item.lowPrice);
                        yData[3].data.push(item.endPrice);
                    });
                    for (var i = 0; i < 4; i ++) {
                        seriesData.push({
                            name: yData[i].name,
                            type: "line",
                            data: yData[i].data,
                            smooth: true,
                        })
                    }
                    drawChart("chart", stockName + "股票基本数据情况", xData, seriesData, nameList);
                } else if (res.data.code == 500) {
                    message(res.data.msg, "error");
                }
            });
        }
        function drawAverageInfo() {
            message("数据加载中, 请稍候", "info");

            const xData = [];
            const seriesData = [];
            var stockName = "";
            data.stockNameList.forEach(item => {
                if (item.stockId == data.stockId) {
                    stockName = item.stockName;
                }
            });
            postRequest("/stockData/getAverageData", {
                stockName: stockName,
                startDate: formatTime(data.selectTime[0]),
                endDate: formatTime(data.selectTime[1])
            }).then((res) => {
                if (res.data.code == 200) {
                    data.averageDataList = res.data.data;
                    const yData = [];
                    const nameList = ["MA5", "MA10", "MA20", "MA30", "MA60", "MA120", "MA250"];
                    for (var i = 0; i < 7; i ++) {
                        yData.push({
                            name: nameList[i],
                            data: []
                        })
                    }
                    data.averageDataList.forEach(item => {
                        xData.push(item.stockDate);
                        yData[0].data.push(item.m5);
                        yData[1].data.push(item.m10);
                        yData[2].data.push(item.m20);
                        yData[3].data.push(item.m30);
                        yData[4].data.push(item.m60);
                        yData[5].data.push(item.m120);
                        yData[6].data.push(item.m250);
                    });
                    for (var i = 0; i < 7; i ++) {
                        seriesData.push({
                            name: yData[i].name,
                            type: "line",
                            data: yData[i].data,
                            smooth: true,
                        })
                    }
                    drawChart("chart", stockName + "股票均线数据情况", xData, seriesData, nameList);
                } else if (res.data.code == 500) {
                    message(res.data.msg, "error");
                }
            });
        }
        function drawChart(id, title, xData, seriesData, legendData) {
            var chartDom = document.getElementById(id);
            var myChart = echarts.init(chartDom);
            myChart.clear();
            var option;

            option = {
                title: {
                    text: title,
                },
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    data: legendData
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                toolbox: {
                    feature: {
                        saveAsImage: {},
                    },
                },
                xAxis: {
                    name: "日期",
                    type: "category",
                    data: xData,
                },
                yAxis: {
                    name: "价格",
                    type: "value",
                    min: (value) => {
                        return Math.floor(value.min);
                    },
                    max: (value) => {
                        return Math.ceil(value.max);
                    }
                },
                series: seriesData
            };

            option && myChart.setOption(option);

            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }
        return {
            data,
            drawBasicInfo,
            drawAverageInfo,
        };
    },
};
</script>

<style scoped>
.single-chart {
    height: calc(100vh - 140px);
    min-height: 400px;
    margin-top: 20px;
}
</style>